<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><head>
 


<meta name="author" content="Martyn Eggleton">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Martyn's Moopan</title>
</head><body>
<div id="page_small"><style type="text/css">
body {background-color: black;
		color: white;
}
</style>
  <h1>Martyn's Moopan</h1>
  <p>Moopan provides mouseover activated panning for divs using mootools 1.2+</p>  
  <p>These examples use <a href="js/moopan.js" target="_blank">moopan.js</a> and 
  <a href="js/mootools.js" target="_blank">mootools.js</a> (version 1.2+). i.e.
  <pre>&lt;script src="js/mootools.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="js/moopan.js" type="text/javascript"&gt;&lt;/script&gt;</pre>
<br>
  
  <p>The first example picks up all divs with class="moopan_both" and applies the effect using no explict javascript, 
  just the class.</p>
  <pre>&lt;div class="moopan_both" style="width: 700px; height: 200px;"&gt;
		&lt;img src="http://www.regenerationgallery.lowtech.org/images/part1.jpg" alt=""&gt;
	&lt;/div&gt;</pre>

	<div class="moopan_both" style="width: 700px; height: 200px;">
		<img src="http://www.regenerationgallery.lowtech.org/images/part1.jpg" alt="">
	</div>

  <p>second uses class="moopan_vert"</p>
	<div class="moopan_vert" style="width: 700px; height: 200px;">
		<img src="http://www.regenerationgallery.lowtech.org/images/part2.jpg" alt="">
	</div>
  
  <p>Third uses class="moopan_horz"</p>
	<div class="moopan_horz" style="width: 700px; height: 200px;">
		<img src="http://www.regenerationgallery.lowtech.org/images/part3.jpg" alt="">
	</div>

  <p>forth is set up using an explicit id (in this case id="moopan" and explicit javascript which allows explicit options to be used, same effect can be done to any group of divs using similar code to that at the end og moopan.js</p>
<pre>window.addEvent("domready", function() {
  $("moopan").moopan({fDeadZone: [0, 1],fStartProportion: [0.5, 0.5], iSecondsAtTopSpeed: [4, 4]});
});
  </pre>
<p>the available options and their defaults are</p>
<pre>    fStartProportion: [0, 0], //The start position from 0 -1  [X, Y]
    iFPS: 16, //Frames per second
    iSecondsAtTopSpeed: [2, 2], // how long from one extreme to the other at full speed [X, Y]
    fDeadZone: [0.3, 0.3], // the size of the central dead zone 0  = no dead zone 1 turns off scrolling for that direction [X, Y]
</pre>
  <div id="moopan" style="width: 700px; height: 200px;">
		<img src="http://www.regenerationgallery.lowtech.org/images/part4.jpg" alt="">
	</div>

<script src="js/mootools.js" type="text/javascript"></script>
<script src="js/moopan.js" type="text/javascript"></script>
<script type="text/javascript">
  window.addEvent("domready", function() {
    $("moopan").moopan({fDeadZone: [0, 1],fStartProportion: [0.5, 0.5], iSecondsAtTopSpeed: [4, 4]});
  });
</script>
</body></html>